<template>
	<view class="search-page">
		<view class="header">
			<view class="search-box app-border-color">
				<text class="iconfont icon-sousuo6"></text>
				<input class="set" v-model="searchVal" type="text" placeholder="输入关键词搜索" />
				<view class="search-btn app-bac-color" @click="toSearch">搜索</view>
			</view>
		</view>
		
		<view class="section-box">
			<view class="head">
				<view class="title">历史搜索</view>
				<view class="del" @click="clearHis">
					<view class="iconfont icon-shanchu" ></view>
					<text>清空</text>
				</view>
			</view>
			<view class="list">
				<view 
					class="item" 
					v-for="(item, index) in historySearchList"
					:key="index"
					@click="clickHistory(item)"
				>
					{{ item.keyword }}
				</view>
			</view>
		</view>
		
		<view class="section-box">
			<view class="head">
				<view class="title">搜索发现</view>
			</view>
			<view class="list">
				<view 
					class="item" 
					v-for="(item, index) in findList"
					:key="index"
					@click="clickFind(item)"
				>
					{{ item }}
				</view>
			</view>
		</view>
		
		<view class="section-box">
			<view class="head">
				<view class="title">
					<text>热搜榜单</text>
					<image src="https://oss.yzroom.com/attach/2023/12/bb884202312221442568168.png"></image>
				</view>
			</view>
			<view class="goods-list">
				<view 
					class="item" 
					v-for="(item,index) in hotList" 
					:key="index"
					@click="clickHot(item)"
				>
					<view class="pic">
						<image class="img" :src="item.image"></image>
						<image class="num num-pic" v-if="index == 0" src="../../../static/images/icon/order_1.png"></image>
						<image class="num num-pic" v-else-if="index == 1" src="../../../static/images/icon/order_2.png"></image>
						<image class="num num-pic" v-else-if="index == 2" src="../../../static/images/icon/order_3.png"></image>
						<image class="num num-pic" v-else src="../../../static/images/icon/order_4.png"></image>
						<view class="num number">{{ (index + 1) }}</view>
						
					</view>
					<view class="right-box">
						<view class="title m-ellipsis">{{ item.store_name }}</view>
						<view class="price">¥<text>{{ item.min_day_price }}</text> <text class="note">/天</text></view>
					</view>
				</view>
			</view>
		</view>
		<u-modal 
			:show="modalShow" 
			title="温馨提示" 
			@cancel="hiddenDialog"
			@confirm="clearHistoryFun"
			confirmColor="#00B89F"
			:showCancelButton="true"
		>
			<view class="mdoal-content">
				确定要清空所有历史搜索吗？
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		historySearch, // 搜索历史列表
		searchFind, // 搜索发现列表
		clearSearch, // 清空搜索历史
		hotSearchList, // 热搜榜单列表
	} from "@/api/homeSearch.js"
	export default {
		
		data() {
			return {
				searchVal: '',
				findList: [],
				historySearchList: [], // 历史搜索记录
				hotList: [], // 热搜列表
				modalShow: false,
			}
		},
		onLoad() {
		},
		onShow() {
			this.getHistorySearch();
			this.getSearchFind();
			this.getHotSearchList();
		},
		methods: {
			clearHis() {
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确定要清空所有历史搜索吗？',
					confirmColor: '#00B89F',
					cancelColor: '#1F1F1F',
					success: function(res) {
						if (res.confirm) {
							clearSearch().then(resd => {
								uni.showToast({
									title: resd.msg
								})
								that.getHistorySearch();
							})
						} else if (res.cancel) {
							// return that.$util.Tips({
							// 	title: '已取消'
							// });
						}
					}
				});
			},
			hiddenDialog() {
				// this.modalShow = false
				
				
				
			},
			/* 点击热点 */
			clickHot(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}`
				})
			},
			/* 获取热搜榜单列表 */
			getHotSearchList() {
				hotSearchList().then(res => {
					this.hotList = res.data
				})
			},
			/* 清空历史搜索 */
			clearHistoryFun() {
				const that = this
				that.modalShow = false
				clearSearch().then(res => {
					uni.showToast({
						title: res.msg
					})
					that.getHistorySearch();
				})
			},
			/* 获取搜索发现列表 */
			getSearchFind() {
				searchFind().then(res => {
					this.findList = res.data
				})
			},
			/* 选中历史搜索 */
			clickHistory(e) {
				this.searchVal = e.keyword
				this.toSearch();
			},
			clickFind(e) {
				this.searchVal = e
				this.toSearch();
			},
			/* 获取历史搜 */
			getHistorySearch() {
				historySearch().then(res => {
					this.historySearchList = res.data;
				})
			},
			toSearch(){
				if(!this.searchVal) {
					return
				}
				uni.navigateTo({
					url: `/pages/goods/goods_list/index?searchValue=${this.searchVal}&title=${this.searchVal}`
				})
			},
		},
	}
</script>

<style lang="scss">
	.mdoal-content {
		padding: 40rpx 0;
		text-align: center;
	}
	page { background-color: #fff; }
	.search-page {
		
		.header {
			padding: 24rpx;
			box-shadow: inset 0rpx -2rpx 0rpx 0rpx #FAFAFA;
			
			.search-box {
				padding: 0 8rpx 0 24rpx;
				display: flex;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				border: 1rpx solid #39CCC2;
				align-items: center;
				
				.iconfont {
					margin-right: 12rpx;
					color: #979797;
				}
				
				.set {
					flex: 1;
					font-size: 28rpx;
				}
				
				.search-btn {
					margin-left: 24rpx;
					width: 120rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: #39CCC2;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
				}
			}
			
		}
	
		.section-box {
			margin-top: 48rpx;
			padding: 0 24rpx;
			
			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 32rpx;
				}
				
				image {
					margin-left: 12rpx;
					width: 32rpx;
					height: 32rpx;
				}
				
				.del {
					display: flex;
					align-items: center;
					color: #999999;
					font-size: 24rpx;
					
					text {
						margin-left: 8rpx;
						font-size: 28rpx;
						font-weight: 400;
					}
				}
			}
		
			.list {
				display: flex;
				flex-wrap: wrap;
				padding-top: 8rpx;
				margin-left: -24rpx;
				max-height: 190rpx;
				overflow: hidden;
				.item {
					min-width: 96rpx;
					margin-left: 24rpx;
					padding: 0 24rpx;
					margin-top: 24rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					background: #F5F7FA;
					border-radius: 28rpx;
					font-size: 24rpx;
				}
			}
		
			.goods-list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				
				.item {
					width: 48%;
					margin-top: 24rpx;
					display: flex;
					
					.pic {
						position: relative;
						
						.img {
							width: 144rpx;
							height: 144rpx;
						}
						
						.num {
							position: absolute;
							top: 0;
							left: 18rpx;
							z-index: 2;
							width: 26rpx;
							height: 29rpx;
						}
						
						.number {
							width: 26rpx;
							height: 29rpx;
							line-height: 28rpx;
							font-size: 20rpx;
							font-weight: bold;
							color: #FFFFFF;
							text-align: center;
						}
					}
				
					.right-box {
						padding-top: 16rpx;
						margin-left: 16rpx;
						flex: 1;
						
						.title {
							font-size: 24rpx;
							font-weight: bold;
							color: #1F1F1F;
						}
						
						.price {
							margin-top: 8rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #FF1F2E;
							vertical-align: text-bottom;
							
							text {
								margin-left: 4rpx;
								font-size: 33rpx;
							}
							
							.note {
								margin-left: 8rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #FF1F2E;
							}
						}
					}
				}
			}
		}
	}
</style>